import cls from "@/styles/components/CreateUser/RoleSelector.module.scss";
import { Icon } from "@/ui/Icons/Icon";
import { Dropdown, DropdownItem } from "@/ui/Dropdown/Dropdown";
import cn from "classnames";
import React, { useState } from "react";

type OptionI = {
  id: number;
  name: string;
};

type Props = {
  selected: OptionI;
  setSelected: (v: OptionI) => void;
  options: OptionI[];
};

export const TableSort = ({ selected, setSelected, options }: Props) => {
  const [sortSelectOpen, setSortSelectOpen] = useState(false);
  return (
    <div className={cls.root}>
      <div
        className={cls.valueBox}
        onClick={() => setSortSelectOpen(!sortSelectOpen)}
      >
        <div className={cls.value}>{selected?.name}</div>
        <button
          type="button"
          onClick={() => setSortSelectOpen(!sortSelectOpen)}
          className={cls.arrow}
        >
          <Icon name="arrow" />
        </button>
      </div>
      <Dropdown
        isOpen={sortSelectOpen}
        close={() => setSortSelectOpen(false)}
        parentCls={cls.root}
        fullWidth
      >
        {options?.map((o) => {
          return (
            <DropdownItem key={o.id}>
              <button
                type="button"
                className={cn(cls.option, {
                  [cls.selected]: o.id === selected?.id,
                })}
                onClick={() => {
                  setSelected(o);
                  setSortSelectOpen(false);
                }}
              >
                {o.name}
              </button>
            </DropdownItem>
          );
        })}
      </Dropdown>
    </div>
  );
};
